import React, { Component } from 'react';
import { Grid, Select, Search, Input, DatePicker } from '@alifd/theme-ds-jxc';
import IceContainer from '@icedesign/container';
import axios from 'axios';
import {
  FormBinderWrapper as IceFormBinderWrapper,
  FormBinder as IceFormBinder,
  FormError as IceFormError,
} from '@icedesign/form-binder';
import PageHead from '../../../../components/PageHead';
import service from '../../../../utils/service';
import api from '../../../../utils/api';

const { Row, Col } = Grid;
export default class chooseHead extends Component {
  static displayName = '采购退货筛选条件';

  static propTypes = {};

  static defaultProps = {};

  constructor(props) {
    super(props);
    this.state = {
      search: '',
      storeList: [],
      filterData: {
        w_id: '', // 仓库id
        add_time: '', // 退库时间
        search: '', // 搜索
      },
    };
  }
  // 获取仓库列表
getStoreList= () => {
  service({
    method: 'get',
    url: api.StoreList,
  })
    .then((res) => {
    
      const data = res.data.list;
      const storeList = [];
      if (data.length !== 0) {
        data.forEach((item) => {
          let obj = {};
          obj = { label: item.name, value: item.id };
          storeList.push(obj);
        });
      }
      this.setState(
        {
          storeList,
        }
      );
    });
}
componentDidMount() {
  this.getStoreList();
}
handleChange=(value) => {
  if(value.add_time){
    value.add_time= new Date(value.add_time).toLocaleDateString();
  }

  this.props.handleFilterChange(value);
}
render() {
  return (
    <div style={styles.overview}>
      <PageHead title="退库列表筛选" />
      <IceContainer style={styles.alignRight}>
        <IceFormBinderWrapper value={this.state.filterData} onChange={this.handleChange}>
          <Row style={styles.row} gutter="10">
            <Col span="6">
              <span style={styles.SelectLabel}>分店仓库</span>
              <IceFormBinder name="w_id">
                <Select dataSource={this.state.storeList} size="large" autoWidth placeholder="请选择分店仓库" style={styles.Select} hasClear />
              </IceFormBinder>
            </Col>
            <Col span="6">
              <span style={styles.SelectLabel}>退库日期</span>
              <IceFormBinder name="add_time">
                <DatePicker style={styles.Select.DatePicker} size="large" style={styles.Select} />
              </IceFormBinder>
            </Col>
            <Col span="6">
              <span style={styles.SelectLabel}>商品搜索</span>
              <IceFormBinder name="search">
                <Search
                  type="normal"
                  placeholder="请输入商品名称或商品条码"
                  size="medium"
                  style={styles.Select}
                />
              </IceFormBinder>
            </Col>
          </Row>
        </IceFormBinderWrapper>
      </IceContainer>
    </div>
  );
}
}

const styles = {
  overview: {
    h3: {
      fontSize: '20px',
      textAlign: 'left',
      lineHeight: '30px',
      fontFamily: 'SourceHanSans-Medium',
      color: '#333333',
      marginBottom: '20px',
    },
  },
  alignRight: {
    textAlign: 'right',
  },
  container: {
    padding: '0',
  },
  alignLeft: {
    float: 'left',
  },
  Select: {
    float: 'left',
    width: 'calc(100% - 100px)',
    height: '38px',
    maxWidth: '300px',
    DatePicker: {
      width: 'calc(100% - 100px)',
      minWidth: '130px',
      float: 'left',
      maxWidth: '300px',
    },
  },
  SelectLabel: {
    fontSize: '14px',
    lineHeight: '40px',
    float: 'left',
    margin: '0 10px 0 0',
    padding: '0',
    color: '#666',
    textAlign: 'right',
    minWidth: '60px',
  },
  Search: {
    float: 'left',
  },
  input: {
    float: 'left',
  },
};
